<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="copyright" content="留学网">
<meta name="author" content="留学网">
<title>留学网</title>
<link rel="stylesheet" href="./static/css/element-ui.css">
<script src="./static/js/basic.js"></script>
<script type="text/javascript" src="./static/js/swiper-4.5.3.min.js"></script>
<link rel="stylesheet" href="./swiper/swiper.min.css" />
<script src="./static/js/element-ui.js"></script>
<script src="./static/js/js.js"></script>
<script src="./static/js/component.js"></script>
</head>

<body>
  <div v-cloak class="main zxb-home curNav2" id="app">
    <layout>
      <dl class="order">
        <dd v-for="item in list" :key="item.id" class="item" @click="link($event, item.id)">
          <div class="top">
            <span class="sp">{{item.sn}}</span>
            <span class="status" data-type="1">{{item.status_text || '待支付'}}</span>
            
          </div>
          <div class="bottom">
            <span class="price">￥{{item.price || '0.00'}} X {{item.total_number}}</span>
            <span class="total_price">￥{{item.total_price}}</span>
          </div>
          <div class="bottom bottom1">
            <span></span>
            <span class="time">{{item.pay_time_text || '2022-03-02 00:01:02'}}</span>
          </div>
        </dd>
      </dl>
    </layout>
    
    <!-- 弹窗 -->
    <!-- <my-mask :visible.sync="showMask"></my-mask> -->

    
  </div>
  
  
  <script>
    
  </script>
  <script type="text/babel">
    var time = new Date().getTime()
    new Vue({
      el: '#app',
      data:{
        banner:[
          {src:'./static/image/banner.webp'}
        ],
        selectOpen:false,
        list:[],
        cartList:[],
        showCart:false,
        total_price1:'0.00',
        page:1,
        total:1
      },
      created() {
          
        // jump()
      },
      mounted() {
        // 监听页面滚动事件，判断是否滚动到底部
        window.addEventListener('scroll', ()=> {
          if (this.isBottomOfPage()) {
            console.log('已到达页面底部');
            this.getList();
            // 在这里执行你需要的操作，例如加载更多内容
          }
        });

        


        this.getList()
      },
      computed:{
        total_price(){
          let price = 0;
          for(let i = 0; i < this.cartList.length; i++){
            price = price + Number(this.cartList[i].total_price);
          }
          console.log('price-----------------',  price)
          return price.toFixed(2)
        }
      },
      methods: {
        isBottomOfPage() {
          // 获取当前页面的滚动高度、视口高度和文档总高度
          const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
          const viewportHeight = window.innerHeight;
          const scrollHeight = document.documentElement.scrollHeight;

          // 判断是否滚动到底部
          return scrollTop + viewportHeight >= scrollHeight - 1; // 减1是为了处理一些浮点数精度问题
        },
        getList(){
          if(this.list === this.total) return;
          ordersListApi({page: this.page}, res=>{
            this.page++;
            this.list = this.list.concat(res.data);
          })
        },
        
        link(e, id){
          console.log(e.target.dataset.type)
          if(e.target.dataset.type == '1'){
            console.log('调起支付')
          }else{
            window.location.href="./orderDetail.html?id="+id
          }
        }
      }
    })
  </script>
  
  <style>
    
  </style>
  
</body>
</html>